﻿﻿
<style>
    .formBody {
        clear: left;
        vertical-align: middle;
        width: 500px;
        height: 500px;
        margin: 0 auto;
    }

        .formBody .input-text {
            height: 30px;
            width: 300px;
            margin-bottom: 20px;
        }

        .formBody div {
            text-align: center;
        }

        .formBody h1 {
            text-align: center;
            margin: 50px 0;
        }

        .formBody .input-button {
            width: 100px;
            height: 50px;
            font-size: 26px;
        }
</style>
<div class="container">
    <form action="" class="formBody" method="post">
        <h1>注册账号</h1>
        <div>
            账号：<input class="input-text" type="text" id="username" />
        </div>
        <div>
            密码：<input class="input-text" type="text" id="password" />
        </div>
        <div>
            <input class="input-button" type="button" value="提交" id="submit" />
        </div>
    </form>
</div>

@section script
    {
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //网页加载完毕后执行事件
        $(function () {

            //绑定点击按钮
            $("#submit").on("click",
                //绑定的事件
                function () {
                    //从账号密码输入框获取参数
                    var username = $("#username").val();
                    var password = $("#password").val();

                    //  传递给后端（控制器） ajax 网络请求（http请求） 请求方式Get Post Put。。。。
                    //发起请求$.post();
                    //        url请求地址 控制器方法的    请求的参数 json格式                 请求成功后的响应事件
                    $.post('/Home/RegisterAccount', { username: username, password: password }, function (data, success) {
                        //弹出成功/失败的弹窗
                        alert(data);
                        console.log('服务器返回结果：' + data);
                        if (data == "注册成功") {
                            //跳转到登录 页面
                            //window.location.href="login.html"
                        }
                    });

                });
        })
    </script>

}